<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" >
<script src="/js/bootstrap.js"></script>
</head>
<body>
<f:form id="insFrm" action="${pageContext.request.contextPath}/update" method="post" enctype="multipart/form-data" modelAttribute="bill">
	<input type="hidden" name="id" value="${bill.id }">
	<input type="hidden" id="cId" value="${bill.companyId }">
	<input type="hidden" id="bId" value="${bill.businessId }">
	<input type="hidden" id="dId" value="${bill.deptId }">
	<h4>发薪单</h4>
	发薪单编号:<f:input path="code"/><f:errors path="code" cssStyle="color:red"></f:errors><br>
	发薪单名称:<f:input path="name"/><f:errors path="name" cssStyle="color:red"></f:errors><br>
	所属组织:<select name="companyId" id="companyId" onchange="companyChange(this)"></select><br>
	所属事业部:<select name="businessId" id="businessId" onchange="businessChange(this)"></select><br>
	所属部门:<select name="deptId" id="deptId"></select><br>
	发放总金额:<f:input path="acount"/><f:errors path="acount" cssStyle="color:red"></f:errors><br>
	计税标准文件:<input type="file" name="file">
	<img alt="没有图片" src="${bill.bills }" width="60px" height="50px">
	<br>
	
	<h4>发薪人员</h4>
	<%-- <input type="button" value="增加发薪人员" onclick="addLine()">
		<c:forEach var="u" items="${bill.users }" varStatus="ind">
			<span class="sp">
				员工姓名:<input type="text" name="users[${ind.index }].name" value="${u.name }">
				员工类型:<select id="t_'+s+'" name="users[${ind.index }].type" value="${u.type }"></select>
				发放金额:<input type="text" name="users[${ind.index }].price" value="${u.price }">
				<input type="button" value="删除" onclick="deleLine(this)">
			<br></span>
		</c:forEach> --%>
		
		<input type="button" value="添加发薪人员" onclick="addLine()">
		<c:forEach var="u" items="${bill.users }" varStatus="ind">
			<span class="sp">
				员工姓名<input type="text" name="users[${ind.index }].name" value="${u.name }"> 
				员工类型<select id="t_'+s+'" name="users[${ind.index }].type" value="${u.type }"></select>
				发放金额<input type="text" name="users[${ind.index }].price" value="${u.price }">
				<input type="button" value="删除" onclick="delLine(this)">
			<br></span>
			
		</c:forEach>
		<span id="sp"></span>
	<input type="button" value="提交" onclick="tj()">
</f:form>
<script type="text/javascript">

	var s = $(".sp").length;
	
	function addLine(){
		 /*  $("#sp").append('<span class="sp">'+
				'员工姓名:<input type="text" name="users['+s+'].name">'+
				'员工类型:<select id="t_'+s+'" name="users['+s+'].type"></select>'+
				'发放金额:<input type="text" name="users['+s+'].price">'+
				'<input type="button" value="删除" onclick="deleLine(this)">'+
		'<br></span>')  */ 
		/* $.post(
				"${pageContext.request.contextPath}/getTypes",
				function(msg){
					for(var i = 0;i<msg.length;i++){
						$("#t_"+s).append('<option value="'+i+'">'+msg[i]+'</option>')
					}
					s++;
				}
			) */
		$("#sp").append('<span class="sp">'+
				'员工姓名<input type="text" name="users[${ind.index }].name" value="${u.name }">'+ 
				'员工类型<select id="t_'+s+'" name="users[${ind.index }].type" value="${u.type }"></select>'+
				'员工工资<input type="text" name="users[${ind.index }].price" value="${u.price }">'+
				'<input type="button" value="删除" onclick="delLine(this)">'+
			<br></span>')
		//追加枚举类下拉框
		$.post(
		"getTypes",
		function (msg) {
			if(msg){}
			for (var i = 0; i < msg.length; i++) {
				$("#t_"+s).append('<option value="'+i+'">'+msg[i]+'</option>')
			}
			s++;
		}
		)
	}
	/* function deleLine(lineDom){
		$(lineDom).parent().remove();
	} */
	
	
	/* 点击-号删除该行 */
		function deleLine(lineDom) {
			$(lineDom).parent().remove();
		}
	/*三级联动  */
	/* $(function(){
		
		initCompany();
	}) */
	$(function () {
		//初始化所属组织
		initCompany()
	})
	function initCompany(){
		var cId = $("#cId").val(); //获取cId的值
		$.post(
			"${pageContext.request.contextPath}/getOrgan?parentId=0",
			{parentId:0},
			function (msg){
				var str='<option value="">==请选择==</option>';
				for(var i = 0;i<msg.length;i++){
					str+='<option value="'+msg[i].id+'">'+msg[i].name+'</option>'
				}
				$("#companyId").html(str);
				$("#companyId [value='"+cId+"']").attr("selected",true);
				companyChange($("#cId")[0])
			},
			"json"
		)
	}

	function companyChange(thiz){
		var parentId = $(thiz).val();
		var bId = $("#bId").val();
		$.post(
				"${pageContext.request.contextPath}/getOrgan",
				{parentId:parentId},
				function (msg){
					var str='<option value="">==请选择==</option>';
					for(var i = 0;i<msg.length;i++){
						str+='<option value="'+msg[i].id+'">'+msg[i].name+'</option>'
					}
					$("#businessId").html(str);
					$("#businessId [value='"+bId+"']").attr("selected",true);
					businessChange($("#bId")[0]);
				},
				"json"
			)
	}
	function businessChange(thiz){
		var parentId = $(thiz).val();
		var dId = $("#dId").val();
		$.post(
				"${pageContext.request.contextPath}/getOrgan",
				{parentId:parentId},
				function (msg){
					var str='<option value="">==请选择==</option>';
					for(var i = 0;i<msg.length;i++){
						str+='<option value="'+msg[i].id+'">'+msg[i].name+'</option>'
					}
					$("#deptId").html(str);
					$("#deptId [value='"+dId+"']").attr("selected",true);
				},
				"json"
			)
	}

	function tj(){
		var q = $(".sp").length;
		if(q>0){
			$("#insFrm").submit();
		}else{
			alert("至少添加一条发薪人员")
		}
	}
</script>
</body>
</html>